<template>
  <div class="store-city-wrap" >
      <van-nav-bar
		  title="城市选择"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>

        <!-- 定位城市 -->
        <div 
        v-if="optionCity"
        @click="onClickHome"
        class="option-city" >
            <div class="option-city-label" >当前定位城市</div>
            <div class="option-city-name" >{{ optionCity }}</div>
        </div>
        <div 
        v-else
        @click="onClickHome"
        class="option-city" >
            <div class="option-city-label" >当前定位城市</div>
            <div class="option-city-name" >重新定位</div>
        </div>

        <div 
        v-for="(item, index) in regionAll"
        :key="index"
        class="city-li" >
            <div :id="item.initial" class="city-li-title" >{{ item.initial }}</div>
            <div 
            v-for="(pItem, pIndex) in item.arr"
            :key="pIndex"
            @click="handleToCity(pItem)"
            class="city-li-name" >
                {{ pItem.name }}
            </div>
        </div>


        <div class="init-box" >
            <a 
            v-for="(item, index) in init"
            :key="index"
            href="javascript:void(0)"
            @click="goAnchor('#' + item)"
            >
                <div class="init-li" >{{ item }}</div>
            </a>
        </div>


  </div>
</template>

<script>
import { REGION_ALL } from '@/api/store';
export default {
    data() {
        return {
            optionCity: localStorage.getItem('optionCity'),
            regionAll: [],
            init: ['A', 'B', 'C', 'D', 'F', 'G',
                        'H', 'J', 'K', 'L', 'M', 'N',
                        'P', 'Q', 'R', 'S', 'T',  'W',
                        'X', 'Y', 'Z']
        }
    },
    created() {
        this.getRegion();
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        goAnchor(selector) {
            document.querySelector(selector).scrollIntoView({
                behavior: 'smooth'
            })
        },
        getRegion() {
            this.$http.get(REGION_ALL)
                .then(res => {
                    const {
                        data
                    } = res;

                    let regionAll = [];
                    this.init.forEach(item => {
                        let arr = []
                        regionAll.push({
                            initial: item,
                            arr
                        })

                        data.forEach(pItem => {
                            if(pItem.initial == item) {
                                arr.push(pItem)
                            }
                        })
                    })
                    

                    this.regionAll = regionAll;
                    console.log(this.regionAll)
                })

        },
        // 定位城市
        onClickHome() {
            localStorage.removeItem('handleCity');
            this.$router.back()
        },
        // 选择城市
        handleToCity(item) {
            localStorage.setItem('handleCity', JSON.stringify(item));
            this.$router.back()
        }
    }
}

</script>
<style lang="scss" >
    .store-city-wrap{
        min-height: 100vh;
        padding-top: 46px;
        background-color: #f5f5f5;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        .van-nav-bar .van-icon{
            color: #333333;
        }
        .van-nav-bar__arrow{
            font-size: 20px;
        }
        .van-hairline--bottom::after{
            display: none;
        }
        .option-city{
            padding: 0 0.32rem;
            .option-city-label{
                margin-top: 0.28rem;
                margin-bottom: 0.2rem;
                font-size: 400;
                font-size: 0.24rem;
                color: #666666;
            }
            .option-city-name{
               display: flex;
               align-items: center;
               justify-content: center;
               height: 0.56rem;
               width: 2.12rem;
               font-weight: 400;
               font-size: 0.28rem;
               color: #1D69E4;
               background: #ffffff;
               border: 1px solid #1D69E4;
            }
        }
        .city-li{
            .city-li-title{
                height: 0.34rem;
                line-height: 0.34rem;
                padding: 0.28rem 0 0.12rem 0.24rem;
                font-weight: 400;
                font-size: 0.24rem;
                color: #666666;
            }
            .city-li-name{
                height: 0.82rem;
                padding-left: 0.26rem;
                line-height: 0.82rem;
                font-size: 0.24rem;
                font-weight: 400;
                color: #666666;
                border-bottom: 0.02rem solid #F2F4F5;
                background: #ffffff;
            }
        }   

        .init-box{
            position: fixed;
            right: 0.08rem;
            top: 3.6rem;
            width: 0.2rem;
            font-size: 0.2rem;
            .init-li{
                color: #666666;
                line-height: 0.3rem;
            }
        }
    }   
</style>